<template>
    <div>
        <a-page-header
                style="background-image: url('/bg.jpg');"
                title="问卷调查"
                :sub-title="subTitle"
                :avatar="{ icon:'http://banfang-1252936237.cos.ap-guangzhou.myqcloud.com/public/uploads/yuyin/20/0528/1590645811dzit2q.png' }"
        >
            <template slot="extra">
                <!--        下面的表单-->
                <a-spin :spinning="loading">
                    <a-form :form="form" v-bind="formLayout">
                        <a-form-item label="名字" help="输入的是您小孩的姓名，长度为2到20个字符">
                            <a-input
                                    v-model= "model.name"
                                    placeholder ="请输入小孩姓名"
                                     v-decorator="['name', {rules: [{required: true, min: 2,max:20}]}]"/>
                        </a-form-item>
                        <a-form-item label="年龄" help="输入的是您小孩的年龄，默认是2岁，最大不能超过20岁">
                            <a-input-number
                                    v-model="model.age"
                                    placeholder="请输入小孩年龄"
                                    :default-value="2"
                                    v-decorator="['age', {rules: [{required: true,min: 0,max:2}]}]"
                                    :min="0"
                                    :max="20"
                                    style="width: 100%"/>
                        </a-form-item>
                        <a-form-item label="电话号码" help="输入的是您的电话号码，请认真填写，后期将用于快递联系，长度为2到20位之间">
                            <a-input
                                    v-model="model.phone"
                                    placeholder="请输入您的电话号码"
                                    v-decorator="['phone', {rules: [{required: true,phone:true, min: 2,max:20}]}]"/>
                        </a-form-item>
                        <template v-for="(item,index) in questionTypes">
                            <a-form-item :label="item.name" v-bind:key="index">
                                <a-checkbox-group
                                        v-decorator="['checkbox-group']"
                                        style="width: 100%;"
                                >
                                    <a-row>
                                        <template v-for="(item_,index_) in item.questionTypeOptions">
                                            <a-col :span="8" v-bind:key="index_">
                                                <a-checkbox :value="item_.id">
                                                    {{item_.name}}
                                                </a-checkbox>
                                            </a-col>
                                        </template>
                                    </a-row>
                                </a-checkbox-group>
                            </a-form-item>
                        </template>
                        <a-form-item >
                            <a-button type="primary" html-type="submit" class="login-form-button">
                                提交保存
                            </a-button>
                        </a-form-item>
                    </a-form>
                </a-spin>
            </template>
        </a-page-header>
    </div>
</template>
<script>
    import { ifOauthWechatUser } from "../../api/login";

    const createdModel = {
        name: '',
    }
    const UserInfo = {
        openId: ' ', // 对应微信的 OPENID
        nickname: '', // 对应微信的 nickname
        name: '<div/>', // 对应微信的 nickname
        avatar: '', // 头像网址
        original: '', // 原始API返回的结果
        access_token: '', // access_token， 比如用于地址共享时使用
    }
    const questionTypeOptions = // 选项
        {
            id: 0,
            name: '',
            created_at: '',
        }
    const QuestionType = // 问题
        {
            id: 0,
            name: '',
            description: '',
            icon: '',
            created_at: '',
            questionTypeOptions: [questionTypeOptions]
        }
    export default {
        data() {
            this.asyncRequest()
            this.formLayout = {
                labelCol: {
                    xs: { span: 24 },
                    sm: { span: 5 }
                },
                wrapperCol: {
                    xs: { span: 24 },
                    sm: { span: 12 }
                }
            }
            return {
                a: "asdasdasdasd",
                subTitle: "", // 副标题
                loading: false,
                model: createdModel,
                form: this.$form.createForm(this),
                userInfo: UserInfo,
                questionTypes: [QuestionType]
            };
        },
        methods: {
            async asyncRequest() {
                await ifOauthWechatUser().then((res) => { // 获取用户是否授权
                    if (res.code == 1) { // 表示该用户已经授权
                        // 获取的授权成功，就直接进入该页面，查询相应的授权用户信息
                        this.userInfo = res.data['userInfo']
                        this.questionTypes = res.data['questionTypes']
                    }
                    if (res.code == -5) { //  没有授权
                        window.location.href = res.data;
                    }
                }).catch((err) => {
                    this.$router.push('/500')
                    console.log(err)
                })
            }
        },
        beforeCreate() {
        },
        created() {
        }
    };
</script>
<style>
    tr:last-child td {
        padding-bottom: 0;
    }

    #components-page-header-demo-responsive .content {
        display: flex;
    }

    #components-page-header-demo-responsive .ant-statistic-content {
        font-size: 20px;
        line-height: 28px;
    }

    @media (max-width: 576px) {
        #components-page-header-demo-responsive .content {
            display: block;
        }

        #components-page-header-demo-responsive .main {
            width: 100%;
            margin-bottom: 12px;
        }

        #components-page-header-demo-responsive .extra {
            width: 100%;
            margin-left: 0;
            text-align: left;
        }
    }
</style>
